<template>
	<view class="count">
		<view class="wid100 poAbs" style="height: 449rpx;background: linear-gradient(#e9ffe4, #F6F6F6);top: 0;z-index: 1;"></view>
		<view class="poFix wid100" style="background: #e9ffe4;top: 0;z-index: 11;">
			<!-- 状态栏高度 -->
			<view :style="{ height: `${statusBarHeight}px` }"></view>
			<!-- 自定义导航栏高度 并 居中 -->
			<view class="dis disAl disJuC poRel" :style="{height: `${barHeight}px`}">
				<view class="poAbs" style="width: 32rpx;height: 32rpx;left: 22rpx;" @click="fanhui()">
					<image src="../../../static/fanhui.png" class="wh100"></image>
				</view>
				<view class="foSi35" style="line-height: 36rpx;">充值记录</view>
			</view>
		</view>
		<view :style="{ height: `${statusBarHeight+barHeight}px` }"></view>
		<view class="poRel" style="z-index: 2;">
			<view class="wid100 dis disAl disJuC" :style="{background: tColor}" style="height: 100rpx;">
				<picker class="wid90" mode="date" fields="month" :end="end" :value="date" @change="bindDateChange">
					<view class="dis disAl">
						<view class="fowe600" style="color: black;">{{date}}</view>
						<view class="mar-left20 dis disAl foSi25 " style="color: #6C717A;">
							<view>切换</view>
							<uni-icons type="right" size="25rpx"></uni-icons>
						</view>
					</view>
				</picker>
			</view>
			<scroll-view :style="{ height: `calc(100vh - ${statusBarHeight+barHeight}px - 100rpx)` }" 
				class="wid100" scroll-y="true" @scrolltolower="lower">
				<view style="height: 1rpx;"></view>
				<block v-for="(item,index) in list" :key="index">
					<view class="wid90 mar bacFFF borRad20 mar-top30" style="padding: 30rpx 0;">
						<view class="wid90 mar">
							<view class="dis disAl disJuB ">
								<view class="foSi35 fowe600">充值1000送10元</view>
								<view class="foSi40 fowe600" :style='{color:tColor}'>+1000</view>
							</view>
							<view class="dis disAl disJuB foSi25 mar-top20" style="color: #5B5B5B;">
								<view>2024-06-06 12:00:00</view>
								<view>余额：¥1010</view>
							</view>
						</view>
					</view>
				</block>
				<view v-if="list.length == 0" class="wid90 mar fowe800 foSi35">
					<view style="height: 50rpx;"></view>
					<view class="dis disJuC">
						<image src="../../../static/zanwu.png" style="width: 400rpx;height: 300rpx;"></image>
					</view>
					<view class="textCen mar-top20" style="color: #868686;">暂无数据</view>
				</view>
				<view style="height: 50rpx;"></view>
			</scroll-view>
		</view>
		<!-- <nav-tab cname="fixedtop" v-model="aIdx" @changeTab='changeTab' :tabs='tabs'></nav-tab>
		<view class="mt90">
			<view class="f26 c9 t-c">
				<view v-show="aIdx==0" class="p2">我的{{system.custom.balance}}：{{sl+user.balance}}<text class="ml50">累计支出：{{sl+(info.expenditure||0)}}</text></view>
				<view v-show="aIdx==1" class="p2">累计充值：{{sl+(info.money||0)}}<text class="ml50">累计赠送：{{sl+(info.giveMoney||0)}}</text></view>
			</view>
			<block v-for="(v,i) in dataList" :key='i'>
				<mg-cell cname="p43 f-s" isr="1" :btt="v.note" bttc="f32" :bbt="v.createdAt" :ft="v.type==1?'+'+ v.money:'-'+v.money"></mg-cell>
			</block>
		</view>
		<jzz bgcolor="transparent" imgn="zwye" :nodata="dataList.length==0&&isget" :mygd='mygd' /> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import navTab from '@/components/common/functionCmp/nav-tab.vue'
	import jzz from '@/components/common/jzz.vue'
	import {
		utilMixins,
		sljz
	} from "@/common/util-mixins.js"
	export default {
		name: 'czjl',
		components: {
			navTab,
			jzz,
		},
		data() {
			return {
				date: '',
				end: '',
				statusBarHeight: 0,
				barHeight: 0,
				list: [],
				params: {
					page: 1,
					size: 10,
					type: 2,
				},
				mygd: false
			}
		},
		onLoad(options) {
			// 状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 胶囊数据
			const {top,height} = wx.getMenuButtonBoundingClientRect();
			// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
			this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
			this.getSystem()
			this.date = this.dateFormat()
			this.end = this.dateFormat()
			this.changeTab(0)
		},
		mixins: [utilMixins, sljz],
		computed: {},
		methods: {
			dateFormat(time) {
				let date = new Date();
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year+"-"+month;
				// return year + "-" + month + "-" + day;
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
				this.changeTab(0)
			},
			lower(e) {
				if(this.mygd){
					this.getList()
				}
			},
			changeTab(e) {
				this.mygd = false
				this.params.page = 1
				let type = ''
				switch (e) {
					case 0:
						type = '2';
						break;
					case 1:
						type = '1';
						break;
				}
				this.params.type = type
				this.list = []
				this.getList()
				// console.log(e, this.aIdx)
			},
			async getList() {
				let {
					data
				} = await this.util.request({
					'url': this.api.yemx,
					data: this.params,
				})
				this.list = this.list.concat(data.list)
				this.info = data
				this.isget = true
				this.mygd = this.params.size > data.list.length
				this.params.page++
			},
			fanhui(){
				uni.navigateBack(1)
			},
		},
	}
</script>
<style scoped lang="scss">
	.count{
		min-height: 100vh;
		background-color: #F6F6F6;
	}
	.mt120 {
		margin-top: 120rpx
	}

	.p43 {
		padding: 40rpx 30rpx;
	}
</style>
